/*
* @Author: apple
* @Date:   2017-09-17 18:58:47
* @Last Modified by:   apple
* @Last Modified time: 2017-09-25 21:15:59
*/
html, body, .section {
	min-height: 600px;
	min-width: 1000px;
	/* 最小的宽度和高度 防止 缩放过于变形 */
}
/* 8个背景样式 */
#fp-nav ul li a span { /*  提高层叠性 */
	background: #f40!important;
}
.next {
	position: fixed;
	bottom: 120px;
	right: 10%;
	z-index: 999;
}
/* 第一屏幕制作 start */
.section1 {
	background: #fadd67 url(../images/t1fpyqfltdxxaiulhh-990-600.png) no-repeat center bottom;
}
.fly {
	position: absolute;
	right: 20%;
	top:10%;
}
.shirt01 {
	position: absolute;
	left: 50%;
	margin-left: -200px;
	bottom: 335px;
}
.goods {
	position: absolute;
	left: 50%;
	margin-left: -420px;
	bottom: 150px;
}
/* 第一屏幕制作 end */
/* 第二屏幕制作 start */
.section2 {
	background: #84a2d4 url(../images/t1zdgpfi8exxca6rfn-2000-600.png) no-repeat center bottom;
	z-index: 2;
}
.computer {
	width: 990px;
	height: 500px;
	position: absolute;
	left: 50%;
	/* margin-left: 495px; */
	transform: translateX(-50%);
	/* background: rgba(0,0,0,.3); */
	bottom: 0;
}
.search {
	width: 222px;
	height: 45px;
	background: url(../images/search.png) no-repeat;
	right: -30px;
	bottom: 300px;
	position: absolute;
	display: none;  
}
.search-wrods {
	position: absolute;
	right: 32px;
	top: 5px;
	opacity: 0;   /* 因为后面我们做淡入淡出的效果，所以我们用透明度 不要用 display */

}
.search-02-1 {
	position: absolute;
	bottom: 300px;
	right: 370px;
	display: none;  /* 这个不要淡入淡出，里面显示或者隐藏 */
}
.goods-02 {
	height: 100px;
	position: absolute;
	bottom: 217px;
	right: 270px;
	display: none;  /* jquery 里面用 show  hide 隐藏 */
}
.words-01
,.words-02 {
	position: absolute;
	left: 50%;
	bottom: 550px;
	transform: translateX(-50%);
}
.words-02 {
	opacity: 0;
}
.shirt-02 {
	position: absolute;
	bottom: 345px;
	left: 395px;
	width: 100px;
	display: none;
	z-index: 10;
}
.cover {
	position: absolute;
	bottom: 334px;
    right: 496px;
    width: 101px;
    height: 90px;
    z-index: 5;
    background-color: #fff;
    display: none; 
}
/* 第二屏幕制作 end */
/* 第三屏幕制作 start */
.section3 {
	background: #ef674d;
	z-index: 1;
}
.main {
	position: absolute;
	width: 700px;
	height: 500px;
	background: url(../images/main.png) no-repeat center center;
	left: 50%;
	transform: translateX(-50%);
	bottom: 50px;
}
.select {
	width: 300px;
	height: 250px;
	position: absolute;
	bottom: 0;
	right: 8px;
	/* background-color: pink; */
}
.img {
	position: absolute;
	top: 0;
}
.img-01-a {
	opacity: 0;  /* 这里我们先不用 display:  而用  opacity 淡入效果 */
}
.btn {
	position: absolute;
	bottom: 10px;
}
.btn-01-a {
	opacity: 0;  /* 这里我们先不用 display:  而用  opacity 淡入效果 */
}
/* 沙发 */
.shirt-03,
.t1f {
	position: absolute;
	left: 115px;
	bottom: 200px;
	display: none;
}
/* 第三屏幕制作 end */
/* 第四屏幕制作 start */
.section4 {
	background: #fed url(../images/t1iresfnxaxxca6rfn-2000-600.png) no-repeat center bottom;

}
.cloud {
	 position: absolute;
	 left: 50%;
	 bottom: 550px;
}
.word {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 500px;
}
.words-04-a {
	opacity: 0;
}
.car {
	width: 500px;
	position: absolute;
	/* background-color: pink; */
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
}
.car-img {
	position: absolute;
	bottom: 200px;
	left: 50%;
	transform: translateX(-50%);
	z-index: -1;  /* 负值 往下叠加 */
	display: none;
}
.note {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	background-color: pink;
	bottom: 180px;
	display: none;
}
.note-img {
	position: absolute;
	top: 60px;
	left: 60px;
	opacity: 0;  /* 淡入淡出 opacity */
}
/* 第四屏幕制作 end */
/* 第五屏幕制作 start */
.section5 {
	background: #d04759 url(../images/t1yisqfa4exxa3gmkg-2000-1500.png);
	/* overflow: hidden; */
	perspective: 500;
	-webkit-perspective: 500;
	z-index: 1;
}
.words-05 {
	position: absolute;
	left: 20%;
	top: 10%;
	opacity: 0;
}

.card-05 {
	position: absolute;
	left: 20%;
	bottom: 200px;
	z-index: 10;
}
.order-05 {
	position: absolute;
	left: 27%;
	bottom: 270px;
}
.t1f-05 {
	position: absolute;
	bottom: 800px;
	left: 25%;
	display: none;
}
.mouse {
	position: absolute;
	right: 20%;
	bottom: 200px;
}
.mouse-05-a {
	opacity: 0;
}
.hand-05 {
	position: absolute;
	right: 24%;
	bottom: -375px;
}
.overFlow {  /* 切掉 鼠标小尾巴 */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/* 第五屏幕制作 end */
/* 第6屏幕制作 start */
.section6 {
	background: #84d9ed url(../images/t1dvj.fn0gxxb0_fua-2500-600.png) no-repeat 25% 100%;
}
.box-06 {
	position: absolute;
	left:123px;
	bottom: 500px;
	z-index: 50;
}
.car-06 {
	position: absolute;
	bottom: 0;
	right: 50%;
	z-index: 60;
}
.cloud-06 {
	position: absolute;
	left: 50%;
	bottom: 550px;
	animation: cloud6 30s;
}
@keyframes cloud6 {
	50% {
		left: 10%;
	}
}

.pop-06 {
	position: absolute;
	bottom: 119px;
	right: 48%;
	display: none;
	z-index: 50;
}
.boy {
	right: 50%;
	bottom: 0;
	position: absolute;
	height: 100px;
}
.girl {
	position: absolute;
	right: 315px;
	bottom: 116px;
	height: 123px;
	display: none;
	z-index: 50;
}
.door {
	position: absolute;
	right: 285px;
	bottom: 116px;
	opacity: 0;
}
.pop-07 {
	position: absolute;
	right:445px;
	bottom: 400px;
	z-index: 40;
	display: none;
}
.words-06-a {
	position: absolute;
	left: 10%;
	bottom: 479px;
	display: none;
}
/* 第6屏幕制作 end */
/* 第7屏幕制作 start */
.section7 {
	background: #8ac060 url(../images/t1wf1tfctaxxa3gmkg-2000-1500.png) no-repeat 50% 100%;
}
.star {
	position: absolute;
    left: 50%;
    bottom: 439px;
    margin-left: -295px;
    width: 0;
    height: 20px;
    background: url(../images/star.png) no-repeat;
    background-size: 97px;
}
.good-07 {
	position: absolute;
	bottom: 382px;
    left: 50%;
    margin-left: -289px;
    display: none;

}
/* 第7屏幕制作 end */

/* 第8屏幕制作  */
#circlr {
  cursor: move;
  margin: 0 auto;
  min-height: 100px;
  position: relative;
}
#circlr #loader {
  background: url(../images/loader.gif) center center no-repeat;
  bottom: 0;
  display: none;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
/* 第9屏幕制作 start */
.section9 {
	background: url(../images/ksgw.png);
}
.beginShoping {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom:365px;
}
.btn-08-a {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.again {
	position: absolute;
	bottom: 403px;
	left: 50%;
	margin-left: 240px;
	cursor: pointer;
}
.hand-08 {
	position: absolute;
	bottom: 0;
	left: 50%;
}
/* 第8屏幕制作 end */
/* 直接进入购物中心 */
.go {
	position: fixed;
	top: 5%;
	right: 5%;
	z-index: 999;
}

/* 动画组 */
.next_undown {
	   animation: next .6s linear infinite ;  /*  linear 匀速 */

}
@keyframes next {  /* 类似于js 的声明函数 function */
	
	50% {

	  bottom: 100px;
	}
	100% {
      bottom: 120px;
	}
 }
.updown {  /*  类似于 js  调用函数 */ 
   animation: fly 3s linear infinite ;  /*  linear 匀速 */
}
.shirt-updown {
	animation: shirt01 2.5s linear infinite ;  /*  linear 匀速 */
}
@keyframes fly {  /* 类似于js 的声明函数 function */
	0% {
	  top: 10%;
	}
	50% {

	  top: 20%;
	}
	100% {
		top: 10%;
	}
 }

 @keyframes shirt01{  /* 类似于js 的声明函数 function */
	50% {
	 bottom: 360px;
	}
	100% {
	 bottom: 335px;
	}
 }

 /* 云彩第一组 */
 .cloud-back1 {
	animation: cloud 60s linear infinite;
 }

 @keyframes cloud {
 	0% {
 		left: 50%;
 	}
 	50% {
 		left: -10%;
 	}
 	100% {
 		left: 50%;
 	}
 }

.words-05-a {
	animation: words5 3s forwards;
	/* animation-fill-mode: forwards;  让我们的动画保持最后一帧状态 不循环 */
}
@keyframes words5 {
	100% {
		opacity: 1;
		transform: translateZ(100px) rotateY(360deg);
	}
}